<template>
  <div :class="{'noPadding':!hasRouteAuth('system:notice:read')}" class="global-setting-item mobile-setting-radius">
    <NoticeConfig v-if="hasRouteAuth('system:notice:read')" />
    <RiskNotice v-if="hasRouteAuth('system:risk:read')" class="mt32"/>
    <TagsConfig
      v-if="fieldItems.length && hasRouteAuth('system:kind:tag') "
      :field-items="fieldItems"
      :default-expanded-keys="defaultExpandedKeys"
      class="mt7"
      @getData="getData" />
    <empty-placeholder v-else-if="!hasRouteAuth('system:notice:read')" />
  </div>
</template>

<script>
// components
import NoticeConfig from '@/components/Configuration/noticeConfig';
import RiskNotice from '@/components/Configuration/riskNotice';
import TagsConfig from '@/components/Configuration/tagsConfig';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
// api
import { hasRouteAuth } from '@/utils/permission';
export default {
  components: { NoticeConfig, EmptyPlaceholder, TagsConfig, RiskNotice },
  props: {
    fieldItems: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    tagsTree() {
      const fieldList = this.fieldItems;
      const ans = this.handelData(fieldList);
      return ans;
    }
  },
  methods: {
    hasRouteAuth,
    getData(respetPid) {
      this.$emit('getData', respetPid);
    },
    handelData(list) {
      const tags = list.find(i => i.name === '标签管理');
      if (!tags) return [];
      if (tags.item) {
        tags.item.forEach(i => {
          if (i.item && i.item.length > 0) {
            if (!i.item[0].tagsList) {
              const tagsList = JSON.parse(JSON.stringify(i.item));
              tagsList[0].tagsList = tagsList;
              i.item = [{
                name: '',
                id: '',
                tagsList: tagsList
              }];
            }
          } else {
            i.item = [{
              name: '', id: '', tagsList: []
            }];
          }
        });
      }
      return [tags];
    }
  }
};
</script>

<style lang="scss" scoped>
.global-setting-item {
  // box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  // border-radius:12px;
  background-color: #fff;
  padding: 16px 24px 24px;
  min-height: calc(100vh - 80px);
  &.noPadding {
    padding-top: 4px;
  }
  .mt32 {
    margin-top: 32px;
  }
  .mt7 {
    margin-top: 7px;
  }
}
</style>
